<template>
    <div class="box" :style="{height : innerHeight}">
        <headerCom>
            <template v-slot:center>
                <span class="top">
                    选择语言
                </span>
            </template>
        </headerCom>  

        <van-radio-group v-model="radio" >
        <van-cell-group>
            <van-cell title="简体中文" @click="radio = '1'">
                <template> 
                    <img class="img-icon" :src="radio==1 ? ' https:cdn3.axureshop.com/demo/1525603/images/%E9%85%8D%E9%80%81%E6%97%B6%E6%AE%B5/u12944.png' : ''" />
                </template>
            </van-cell>
            <van-cell title="繁体中文" @click="radio = '2'">
                <template> 
                    <img class="img-icon" :src="radio==2 ? ' https:cdn3.axureshop.com/demo/1525603/images/%E9%85%8D%E9%80%81%E6%97%B6%E6%AE%B5/u12944.png' : ''" />
                </template>
            </van-cell>
            <van-cell title="English" @click="radio = '3'">
                <template> 
                    <img class="img-icon" :src="radio==3 ? ' https:cdn3.axureshop.com/demo/1525603/images/%E9%85%8D%E9%80%81%E6%97%B6%E6%AE%B5/u12944.png' : ''" />
                </template>
            </van-cell>
        </van-cell-group>
        </van-radio-group>
    

    </div>
</template>


<script>
import Vue from 'vue';
import { RadioGroup, Radio,Cell, CellGroup } from 'vant';
Vue.use(Radio,RadioGroup,Cell,CellGroup);


    import headerCom from '../../components/headerView.vue'
export default {
    name : 'SelectLanguage',
    components:{
        headerCom
    },
    data(){
        return{
            innerHeight:'',
            radio: '1',

        }
    },
    created(){
        this.innerHeight=window.innerHeight+'px'
    }

}
</script>

<style scoped>

    .box{
        background-color: #f5f5f5;
    }

    .top{
        margin: auto;
    }
.xuanzheBox{
    margin: 10px auto;
}


    


</style>